<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <script src="/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="js/jQery-3.6.0.min.js" charset="UTF-8"></script>
</head>
<style>
    #form{
        width: 50%;
        margin: 0 auto;
    }
</style>
<body>
<form  id="form" action="/user/regUser.do" method="post">
    <div class="mb-3 mt-3">
        <label for="nickname" class="form-label">用户名:</label>
        <input type="text" class="form-control" id="nickname" autocomplete="off" placeholder="请输入用户名" name="nickname">
        <span id="span"></span>
    </div>
    <div class="mb-3">
        <label for="pwd" class="form-label">密码:</label>
        <input type="password" class="form-control" id="pwd" autocomplete="off" placeholder="请输入密码" name="password">
    </div>
    <div class="mb-3">
        <label for="pwd" class="form-label">确认密码:</label>
        <input type="password" class="form-control" id="pwd1" autocomplete="off" placeholder="请确认密码" name="repassword">
        <span id="checkpwd"></span>
    </div>
    <button type="submit" class="btn btn-primary">注册</button>
</form>

</body>
<script>
    $(function () {
        $(function () {
            $('#nickname').blur(function () {
                let value = $('#nickname').val();
                $.ajax({
                    type: "post",
                    url: "/user/checkName.do",
                    data: {nickName: value},
                    success: function (data) {
                        if (data == "true") {
                            $('#span').html("用户名已经存在").css({'font-size': '14px', 'color': 'red'});
                        } else {
                            $('#span').html("用户名可以使用").css({'font-size': '14px', 'color': 'green'});
                        }
                    }
                })
            });
            $('#pwd1').change(function () {
                let pwd = $("#pwd").val();
                let repwd = document.getElementById("pwd1").value;
                if (pwd != repwd) {
                    $("#checkpwd").html("两次密码输入不一致").css({'font-size': '14px', 'color': 'red'})
                } else {
                    $("#checkpwd").html("两次密码输入一致").css({'font-size': '14px', 'color': 'green'})
                }
            });
        })
    })
</script>
</html>